/**
 * Copyright (c) 2020 kedacom
 * OpenATC is licensed under Mulan PSL v2.
 * You can use this software according to the terms and conditions of the Mulan PSL v2.
 * You may obtain a copy of Mulan PSL v2 at:
 * http://license.coscl.org.cn/MulanPSL2
 * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
 * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
 * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
 * See the Mulan PSL v2 for more details.
 **/
<template>
  <transition name="slide">
  <div class="result-panel" v-show="isShrink" >
    <!-- 选择面板 -->
    <div class="traffic-select-panel">
      <el-row :gutter="26">
        <el-col :span="6" v-for="item in list" :key="item.id">
          <div class="tpye-item" :style="{'color': item.color}" @click="clickType(item)" @mouseover="hoverInType(item)" @mouseleave="hoverOutType(item)">
            <svg-icon :icon-class="item.imgClass" className="type-icon"></svg-icon>
            <div class="state">
              <div class="type">{{item.type}}</div>
            </div>
        </div>
        </el-col>
      </el-row>
    </div>
    <!-- 内容 -->
    <div class="traffic-select-content">
      <div class="dev-list" v-show="curTypeItem.id === 1">
        <ORGIntersectionTree ref="ORGIntersectionTree" v-show="curTypeItem.id === 1" :devsfilter="searchfilter" @treeNodeClick="treeNodeClick" @getDeviceRanges="getDeviceRanges"/>
      </div>
      <div class="route-list" v-show="curTypeItem.id !== 1">
        <RouteCardList v-if="isHasPermission('openatc:optimization:route')" v-show="curTypeItem.id === 2" type="routeOptimize" :curType="curTypeItem.key" :list="routeData" @handleClickItem="handleClickItem"/>
        <RouteCardList v-if="isHasPermission('openatc:interrupt:scenario')" v-show="curTypeItem.id === 3" type="groupcontrol" :curType="curTypeItem.key" :list="groupControlList" @handleClickItem="handleClickItem"/>
        <RouteCardList v-if="isHasPermission('openatc:interrupt:vip')" v-show="curTypeItem.id === 4" type="specialserviceroute" :curType="curTypeItem.key" :list="specialServicerouteList" @handleClickItem="handleClickItem"/>
      </div>
    </div>
  </div>
</transition>
</template>

<script>
import { getTheme, hasPermission } from '../../../../utils/auth.js'
import ORGIntersectionTree from '../../../../components/ORGIntersectionTree/index.vue'
import RouteCardList from './routeCardList'
import { GetAllRoute } from '../../../../api/route'
import { getMessageByCode } from '../../../../utils/responseMessage'
import { GetVipRouteByType } from '../../../../api/service'

export default {
  name: 'resultPanel',
  data () {
    return {
      list: [
        {
          id: 1,
          key: 'devicemanager',
          imgClass: 'devicemanager',
          defaultIcon: 'devicemanager',
          activeIcon: 'devicemanager-choose',
          type: this.$t('openatc.main.devicemanager'),
          color: getTheme() === 'light' ? '#909399' : '#B9BABF'
        },
        {
          id: 4,
          key: 'specialserviceroute',
          imgClass: 'specialserviceroute',
          defaultIcon: 'specialserviceroute',
          activeIcon: 'specialserviceroute-choose',
          type: this.$t('openatc.main.specialServiceRoute'),
          color: getTheme() === 'light' ? '#909399' : '#B9BABF'
        },
        {
          id: 3,
          key: 'groupcontrol',
          imgClass: 'groupcontrol',
          defaultIcon: 'groupcontrol',
          activeIcon: 'groupcontrol-choose',
          type: this.$t('openatc.main.groupControl'),
          color: getTheme() === 'light' ? '#909399' : '#B9BABF'
        },
        {
          id: 2,
          key: 'routeOptimize',
          imgClass: 'routeoptimize',
          defaultIcon: 'routeoptimize',
          activeIcon: 'routeoptimize-choose',
          type: this.$t('openatc.main.routeOptimize'),
          color: getTheme() === 'light' ? '#909399' : '#B9BABF'
        }
      ],
      curTypeItem: {},
      routeData: [], // 所有干线协调
      groupControlList: [],
      specialServicerouteList: []
    }
  },
  components: {
    ORGIntersectionTree,
    RouteCardList
  },
  props: {
    isShrink: {
      type: Boolean,
      default: false
    },
    searchfilter: {
      type: String,
      default: ''
    }
  },
  watch: {
  },
  methods: {
    isHasPermission (path) {
      let res = hasPermission(path)
      return res
    },
    hoverInType (item) {
      for (let i = 0; i < this.list.length; i++) {
        if (this.list[i].id === item.id) {
          this.list[i].imgClass = this.list[i].activeIcon
          this.list[i].color = getTheme() === 'light' ? '#303133' : '#fff'
        }
      }
    },
    hoverOutType (item) {
      for (let i = 0; i < this.list.length; i++) {
        if (this.list[i].id === item.id && !this.list[i].clicked) {
          this.list[i].imgClass = this.list[i].defaultIcon
          this.list[i].color = getTheme() === 'light' ? '#909399' : '#B9BABF'
        }
      }
    },
    clickType (item) {
      this.curTypeItem = item
      for (let i = 0; i < this.list.length; i++) {
        if (this.list[i].clicked) {
          delete this.list[i].clicked
          this.list[i].imgClass = this.list[i].defaultIcon
          this.list[i].color = getTheme() === 'light' ? '#909399' : '#B9BABF'
        }
      }
      for (let i = 0; i < this.list.length; i++) {
        if (this.list[i].id === item.id) {
          this.list[i].clicked = true
          this.list[i].imgClass = this.list[i].activeIcon
          this.list[i].color = getTheme() === 'light' ? '#303133' : '#fff'
        }
      }
      this.$emit('changeType', this.curTypeItem.key)
    },
    getAllRoute (searchfilter) {
      GetAllRoute(searchfilter).then(res => {
        if (!res.data.success) {
          this.$message.error(getMessageByCode(res.data.code, this.$i18n.locale))
          return
        }
        this.routeData = res.data.data
      })
    },
    getVipRoute (type, searchtext) {
      let _this = this
      return new Promise((resolve, reject) => {
        GetVipRouteByType(type, searchtext).then(res => {
          if (!res.data.success) {
            _this.$message.error(getMessageByCode(res.data.code, _this.$i18n.locale))
            return
          }
          resolve(res.data.data)
        })
      })
    },
    doSearch (searchfilter) {
      this.$refs.ORGIntersectionTree.getDeviceRanges(searchfilter)
      this.getAllRoute(searchfilter)
      let vipsearchtext = searchfilter === undefined || searchfilter === '' ? '*' : searchfilter
      this.getVipRoute(1, vipsearchtext).then(res => {
        this.groupControlList = res
      })
      this.getVipRoute(2, vipsearchtext).then(res => {
        this.specialServicerouteList = res
      })
    },
    getDeviceRanges (data) {
      this.$emit('getDeviceRanges', data)
    },
    treeNodeClick (data) {
      this.$emit('treeNodeClick', data)
    },
    handleClickItem (data) {
      this.$emit('handleClickItem', data)
    }
  },
  mounted () {
    // 默认选中路口管理
    this.curTypeItem = this.list[0]
    this.clickType(this.curTypeItem)
    this.doSearch(this.searchfilter)
  }
}
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
</style>
